<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue的内置指令</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
        <style>
            [v-clock] {
                display: none;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <!-- TODO:内置指令的熟悉 -->
            <p v-if="type === 'A'">A</p>
            <p v-else-if="type ==='B'">B</p>
            <p v-else-if="type==='C'">C</p>
            <p v-else>其他</p>
            <ul>
                <li v-for="item in list" :key="item">{{item}}</li>
            </ul>
            <p  v-text="'文本内容'"></p>
            <p v-text="content"></p>
            <p v-html="content"></p>
            <p v-show="show">样式控制显示与隐藏</p>
            <input v-bind:value='title'/>
            {{title}}
            <button @click="changeTitle">修改标题</button>
            <input v-model="title"/>

            <p v-pre>{{title}}</p>
            <p v-once>{{title}}</p>
            <div v-cloak>{{age}}</div>
        </div>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    title: '标题',
                    age:18,
                    content:
                        '<div><b>内容</b><a href="http://www.baidu.com">baidu</a></div>',
                    type: 'C',
                    show: true,
                    list: ['A', 'B', 'C'],
                },
                methods:{
                    chagneTitle() {
                        this.title='新标题';
                    },
                },
            });
        </script>
    </body>
</html>
